<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>输入框组件 - emit方法</title>
</head>

<body>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

    <div id="app">


        <my-input mark="headers" @custom-change="add"></my-input>
        您输入的值是：{{obj.input.headers}}
        <hr />
        <my-input mark="headerss" @custom-change="add"></my-input>
        您输入的值是：{{obj.input.headerss}}
        <hr />



    </div>

    <script>
        const App = Vue.createApp({
            setup() {
                const obj = Vue.reactive({
                    input: {
                        one: "222"
                    }
                });

                const count = Vue.ref("")
                const add = (a) => {

                    //接收传来的值，将值传入数组
                    obj.input[a.mark] = a.value

                }



                return {
                    obj,
                    count,
                    add
                }
            }
        })
        const inutvue = {
            /*
            *  mark:标记（必填）
            *  default：输入框的默认值
            */
            props: {
                mark: {
                    type: String,
                    required: true,
                },
                default: {
                    type: String,
                    default: "默认值"
                }
            },
            //提前声明要使用的自定义事件
            emits: ['customChange'],
            setup(props, { emit }) {
                const handleChange = (event) => {
                    emit("customChange", { value: event.target.value, mark: props.mark })
                    //自定义触发事件，传出输入的值
                }


                return {

                    handleChange,


                };
            },

            template: `<input type="text"  @input="handleChange" /><br />`,
        };
        App.component("my-input", inutvue);
        App.mount("#app");
    </script>

</body>

</html>